<template>
  <el-drawer
    v-model="drawerVisible"
    direction="rtl"
    :title="`${state.title}菜单`"
    size="650px"
    @close="close"
  >
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="formData"
      label-width="auto"
      class="demo-ruleForm"
      status-icon
    >
      <el-form-item label="上级菜单">
        <el-cascader
          v-model="formData.parentId"
          :options="preMenuList"
          :props="{ checkStrictly: true, label: 'title', value: 'id' }"
          clearable
          class="w100"
        />
      </el-form-item>
      <el-form-item
        label="菜单类型"
        prop="type"
        :rules="{ required: true, message: '请输入菜单类型', trigger: 'blur' }"
      >
        <el-radio v-model="formData.type" value="1" border>菜单</el-radio>
        <el-radio v-model="formData.type" value="2" border>按钮</el-radio>
      </el-form-item>
      <el-form-item
        label="菜单名称"
        prop="meta.title"
        :rules="{ required: true, message: '请输入菜单名称', trigger: 'blur' }"
      >
        <el-input v-model="formData.meta.title" placeholder="请输入菜单名称" />
      </el-form-item>
      <template v-if="formData.type == '2'">
        <el-form-item label="权限标识" prop="code">
          <el-input
            v-model="formData.code"
            placeholder="请输入权限标识"
            maxlength="50"
            show-word-limit
          />
        </el-form-item>
      </template>
      <template v-else>
        <el-form-item label="路由地址" prop="path">
          <el-input placeholder="请输入路由地址" v-model="formData.path" />
        </el-form-item>
        <el-form-item label="路由名称" prop="name">
          <el-input placeholder="路由名称" v-model="formData.name" />
        </el-form-item>
        <el-form-item label="菜单图标" prop="meta.icon">
          <el-input
            placeholder="请输入图标名ele-开头"
            v-model="formData.meta.icon"
          />
        </el-form-item>
        <el-form-item label="重定向" prop="redirect">
          <el-input
            placeholder="路由重定向地址redirect"
            v-model="formData.redirect"
          />
        </el-form-item>
        <el-row>
          <el-col :span="8">
            <el-form-item label="是否外链" prop="isLink">
              <el-radio-group v-model="formData.isLink">
                <el-radio :value="false">否</el-radio>
                <el-radio :value="true">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="外链地址" prop="linkTo" v-if="formData.isLink">
              <el-input
                v-model="formData.meta.linkTo"
                placeholder="请输入外链地址"
                maxlength="300"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              prop="meta.hidden"
              label="是否隐藏"
              :rules="{
                required: true,
                message: '是否隐藏为必选项',
                trigger: 'change',
              }"
            >
              <el-radio-group v-model="formData.meta.hidden">
                <el-radio :value="false">不隐藏</el-radio>
                <el-radio :value="true">隐藏</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="显示导航" prop="meta.isBreadcrumd">
              <el-radio-group v-model="formData.meta.isBreadcrumd">
                <el-radio :value="false">不显示</el-radio>
                <el-radio :value="true">显示</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
      <el-form-item label="排序" prop="sort">
        <el-input-number
          v-model="formData.sort"
          :min="1"
          :max="1000"
          style="width: 300px"
        />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
          maxlength="50"
          :autosize="{ minRows: 2, maxRows: 4 }"
          placeholder="请输入备注"
          show-word-limit
          v-model="formData.remark"
          type="textarea"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-row justify="center" class="form-btn">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="submitForm">保存</el-button>
      </el-row>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs, defineExpose, onMounted } from "vue";
import { menuSelect, add, update } from "@/api/System/menu";
import { ElNotification } from "element-plus";
const state = reactive({
  drawerVisible: false,
  title: "",
  formData: {
    type: "1",
    code: "",
    path: "",
    name: "",
    redirect: "",
    isLink: false,
    sort: "",
    remark: "",
    parentId: "",
    meta: {
      title: "",
      icon: "",
      linkTo: "",
      hidden: false,
      isBreadcrumd: false,
    },
  },
});
const ruleFormRef = ref();
const preMenuList = ref([]);
const emit = defineEmits(['refresh'])
// 标记是编辑还是新增
const isStatus = ref("");
const { drawerVisible, formData } = { ...toRefs(state) };
const open = (status: string, rowOrId) => {
  if (status === "edit") {
    state.title = "编辑";
    isStatus.value = "edit";
    state.formData = JSON.parse(JSON.stringify(rowOrId));
  } else {
    state.title = "新增";
    isStatus.value = "add";
    // 存在id那就是新增下级菜单
    if (rowOrId) {
      state.formData.parentId = rowOrId.toString();
    } else {
      // 需要清空级联选择器
      state.formData.parentId = "";
    }
  }
  state.drawerVisible = true;
  getMenuSelect();
};
// 上级菜单列表数据
const getMenuSelect = async () => {
  const res = await menuSelect();
  if (res.code === 200) {
    preMenuList.value = res.data;
  }
};
const close = () => {
  ruleFormRef.value?.resetFields();
  //清除表单数据
  state.formData.parentId = "";
  state.formData.type = "1";
  state.formData.meta.title = "";
  state.formData.code = "";
  state.formData.path = "";
  state.formData.name = "";
  state.formData.meta.icon = "";
  state.formData.redirect = "";
  state.formData.isLink = false;
  state.formData.meta.linkTo = "";
  state.formData.meta.hidden = false;
  state.formData.meta.isBreadcrumd = false;
  state.formData.sort = "1";
  state.formData.remark = "";
  state.drawerVisible = false;
};
const submitForm = () => {
  ruleFormRef.value.validate(async (valid: boolean) => {
    if (!valid) return;
    let res = null;
    if (isStatus.value == "edit") {
      res = await update(state.formData);
    } else {
      res = await add(state.formData);
    }
    if (res.code === 200) {
      ElNotification({
        message: res.message,
        type: "success",
      });
    }
    close();
    // 触发父组件重新加载数据
    emit("refresh");
  });
};
defineExpose({
  open,
});
</script>
<style lang="scss" scoped>
.form-btn {
  .is-justify-center {
    justify-content: right;
  }
}
</style>
